<template>
    <div>
        <div>
            <nav-bar title="修改密码" :show-back="true"/>
        </div>
        <div class="input_div">
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">绑定的手机号为：</span>
                    <!-- <input type="text" slot="right" placeholder="请输入手机号码"> -->
                    <span slot="left">13824050081</span>
                    <yd-sendcode slot="right" v-model="startTime" @click.native="sendCode1">
                    </yd-sendcode>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">验证码：</span>
                    <yd-input slot="right" placeholder="请输入验证码"></yd-input>
                </yd-cell-item>
            </yd-cell-group>
        </div>
        <div class="bottom_div">
            <yd-button @click.native="changeNext()" size="large" bgcolor="rgb(52, 169, 214)" color="#fff">下一步</yd-button>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'ChangePasswordFirst',
    components: {
        NavBar
    },
    data () {
        return {
            startTime: false // 验证码按钮开关
        }
    },
    methods: {
        // 点击获取验证码
        sendCode1 () {
            this.$dialog.loading.open('发送中...')
            setTimeout(() => {
                this.startTime = true
                this.$dialog.loading.close()
                this.$dialog.toast({
                    mes: '已发送',
                    icon: 'success',
                    timeout: 1500
                })
            }, 1000)
        },
        // 点击下一步路由跳转
        changeNext () {
            this.$router.push('/changePasswordSecond')
        }
    }
}
</script>
<style scoped>
.input_div{ margin-top: 1rem}
.bottom_div{margin-top: 1.1rem}
</style>
